<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>vue Hello World</title>
	<style>
		.myDiv {
			width: 200px;
			height: 50px;
			border: 1px solid red;
			background-color: #f90;
		}

		/* 当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。
		我们可以使用 v-cloak 指令来解决这一问题。 */

		[v-cloak] {
			display: none;
		}
	</style>

</head>

<body>
	<div id="app" v-cloak>
		{{ message }}<br />
		{{user}}<br />
		{{sex}}<br />
		<div>
			{{msg1}}
		</div>
		<div v-text="msg1"></div>
		<div v-html="msg1"></div>
		<div v-show="f1">我是f1</div>
		<div v-show="f2">我是f2</div>
		<div v-show="f3">我是f3</div>
		<div>
			表达式:{{a}}+{{b}}={{a+b}}
			<br />
			vue常用表达式-三目运算符:{{a?a:b}}
		</div>
		<div>
			<div v-if="!f1">v-if我是f1</div>
			<div v-if="!f2">v-if我是f2</div>
		</div>
		<div>
			<div>c的值:{{c}}</div>
			<div v-if="c<0.2">小于0.2</div>
			<div v-else-if="c>=0.2&&c<0.4">大于等于0.2,小于0.4</div>
			<div v-else-if="c>=0.4&&c<0.6">大于等于0.4,小于0.6</div>
			<div v-else-if="c>=0.6&&c<0.8">大于等于0.6,小于0.8</div>
			<div v-else>大于等于0.8</div>
			<div>
				v-for<br />
				<div v-for="str in arr1">
					1str的值是 {{str}}
				</div>
				<div v-for="item in arr2">
					2item的值是 {{item}}<br />
					id:{{item.id}}==>姓名:{{item.user}}==>性别:{{item.sex}},{{typeof item.sex}}===>性别:{{item.sex?"先生":"女士"}}
					<br /> <br />
				</div>
				<br />
				下午课程
				<br />
				<div v-for="(x,y) in arr1">
					3x(数组中的数据):{{x}}==>y(下标):{{y}}
				</div>
				<br /><br />
				<div v-for="(x,y) in arr2" :key="x.id">
					4x(数组中的数据):{{x}}==>y(下标):{{y}}===>{{x.id}}
				</div>
				v-for遍历对象
				<div>
					<div v-for="o in obj">
						5{{o}}
					</div>
					<br />
					<br />
					<div v-for="(x,y) in obj">
						6x(对象的属性值):{{x}}===>y(对象的属性名):{{y}}
					</div>
					<br />
					<br />
					<div v-for="(x,y,z) in obj">
						7x(对象的属性值):{{x}}===>y(对象的属性名):{{y}}===>z(属性出现的顺序):{{z}}
					</div>
					<br />
					<br />
					<div v-for="a in 10">
						8a的值{{a}}
					</div>
				</div>
			</div>
		</div>
		<div>
			v-on<br />
			<button type="button" v-on:click="fun1">按钮1</button>
			<br />
			<button type="button" v-on:click="fun2">按钮2</button>
			<br />
			<button type="button" @click="fun3">按钮3</button>
			<br />
		</div>
		<br />
		<br />
		<br />
		<div>
			v-bind<br />
			<div class="myDiv">
				1
			</div>
			<div v-bind:class="myClass">
				2
			</div>
			<div :class="myClass">
				3
			</div>
			<div :class="'myDiv'">
				4
			</div>
		</div>
		<br />
		<br />
		<br />
		<div>
			v-model<br />
			<div>
				<label>
					手机号:<input type="text" v-model="phone" />
				</label>
				<br />
				你输入的手机号是:{{phone}}
			</div>
		</div>
		<br />
		<br />
		<br />
		<div>
			v-pre<br />
			<div>
				没有v-pre {{message}}
			</div>
			<div v-pre>
				v-pre {{message}}
			</div>
		</div>
		<br />
		<br />
		<br />
		<div>
			v-once<br />
			<div>
				n的值{{n}}
			</div>
			<div v-once>
				v-once n的值{{n}}
			</div>
		</div>
	</div>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<script src="./vue.js"></script>
	<script>
		var app = new Vue({
			el: '#app', //document.getElementById("app");
			data: {
				message: 'Hello Vue!这是vue第一个项目',
				user: "lixiaowan",
				sex: 0,
				msg1: "<h1>这是标题</h1>",
				f1: true,
				f2: false,
				f3: 0,
				a: 1,
				b: 2,
				c: Math.random(),
				arr1: ["a", "b", "c", "d"],
				arr2: [{
						id: "1",
						user: "A",
						sex: 0
					},
					{
						id: "2",
						user: "B",
						sex: 1
					},
					{
						id: "3",
						user: "C",
						sex: 1
					},
				],
				obj: {
					sex: 0,
					age: 18,
					name: "vue",
				},
				fun1: function () {
					//this指向Windows
					console.log("这是函数1", this, "获取message", this.message)
				},
				myClass: "myDiv",
				phone: "张",
				n: 0
			},
			methods: {
				fun2: function () {
					//this指向app
					console.log("这是函数2", this, "获取message", this.message);
					console.log("获取手机号:", this.phone);
				},
				fun3() {
					//this指向app
					console.log("这是函数3", this, "获取message", this.message)
				}
			}
		});


		var t = setInterval(function () {
			app.n++;
			if (app.n >= 10) {
				clearInterval(t);
			}
		}, 1000);
	</script>
</body>

</html>